/** 吉他谱 */
import React, { PureComponent } from 'react';
import { connect } from 'react-redux';
import { withRouter } from 'react-router-dom';
import MusicScoreRowCard from '../../components/musicScoreRowCard';
import FooterItem from '../../components/footerItem';
import CustomPagination from '../../components/customPagination';
import TopSpot from '../../components/topSpot';
import styles from './style.module.scss';
import { actionCreators , actionTypes } from './store';
import {actionCreators as guitarActionCreators, actionTypes as guitarActionTypes} from '../guitarScore/store'
class UKuleleScore extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            activeIndex: 2,
            current: 1
        }
    }
    render() {
        const { musicScore , scoreTotal , currentMonthHot} = this.props;
        const { activeIndex , current } = this.state;
        return (
            <div className={styles['guitar-score']}>
                <div className={styles['guitar-container']}>
                    <div className={styles['container']}>
                        <div className={styles['score-head']}>
                            <div className={styles['score-title']}>尤克里里</div>
                            <div className={styles['score-type']}>
                                <span className={ this.state.activeIndex === 2 ? styles['score-type-active'] : ''} onClick={this.handleSwitchType.bind(this,1,2)}>最新</span>
                                <span className={ this.state.activeIndex  === 1 ? styles['score-type-active'] : ''} onClick={this.handleSwitchType.bind(this,1,1)}>热门</span>
                            </div>
                        </div>
                        <div className={styles['music-score-card']}>
                            <div className={styles['card-container']}>
                                {
                                    musicScore.map( (item , index) => {
                                        return (
                                            <div className={styles['card-list']} key={JSON.stringify(item)}>
                                                <MusicScoreRowCard state={activeIndex} data={item}/>
                                            </div>
                                        )
                                    })
                                }
                               
                            </div>
                        </div>
                        <div className={styles['score-pagination']}>
                            <CustomPagination pageSize={20} total={scoreTotal} current={current} onChange={this.handleChange.bind(this)}/>
                        </div>
                    </div>
                    <div className={styles['top-spot']}>
                        <div><TopSpot data={currentMonthHot}/></div>
                        {/* <div><HotSearch/></div> */}
                       
                    </div>
                    
                </div>
                <FooterItem/>
            </div>
        )
    }
    /**
     *  分页器发生改变时
     * @param {int} page 分页器当前页
     */
    handleChange (page) {
        console.log(page);
        const { acquireGuitarMusicScore } = this.props;
        const { activeIndex} = this.state;
        this.setState({
            current: page
        });
        acquireGuitarMusicScore(activeIndex,page)
    }
    /**
     * 切换热门或者最新
     * @param {int} type   1 吉他谱 2 尤克里里
     * @param {int} state  0 热门 1 最新
     */
    handleSwitchType (type,state) {
        const { acquireGuitarMusicScore } = this.props;
        this.setState({
            activeIndex: state,
            current: 1
        });
        acquireGuitarMusicScore(state,1);
    }
    componentDidMount (){
        const { acquireGuitarMusicScore , acquireCurrentMonthHot } = this.props;
        const { activeIndex , current} = this.state;
        acquireGuitarMusicScore(activeIndex,current);
        acquireCurrentMonthHot();
    }
}

const mapState = (state) => ({
    musicScore: state.uKuleleScore.musicScore || [],
    scoreTotal: state.uKuleleScore.scoreTotal || 0,
    currentMonthHot: state.guitarScore.currentMonthHot || [],
});

const mapDispatch = (dispatch) => ({
    //
    acquireGuitarMusicScore (state,page) {
        dispatch(actionCreators.acquireGuitarMusicScore({
            actionType: actionTypes.Obtain_Ukulele_Music_Score,
            type: 2,
            state,
            page,
            size: 20
        }))
    },
    // 获取本月热度top15
    acquireCurrentMonthHot () {
        dispatch(guitarActionCreators.acquireCurrentMonthHot({
            actionType: guitarActionTypes.Obtain_Current_Month_Hot,
            type: 2
        }))
    }
});


export default connect(mapState, mapDispatch)(withRouter(UKuleleScore));